var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// 创建矩形区域，但不显示
context.rect(10, 10, 20, 20);
// 填充当前的图像（路径）
context.fill();
// 立即绘制填充颜色的矩形
context.fillRect(10, 10, 20, 20);

// 创建矩形区域2，但不显示
context.rect(50, 10, 20, 20);
// 绘制当前路径
context.stroke();

// 立即绘制矩形轮廓
context.strokeRect(50, 10, 20, 20);
 
context.stroke();

context.fill();
// context.fillRect(1, 1, 2, 2);


// 开始设置路径
context.beginPath(); 
// 设置路径原点
context.moveTo(10, 20);  
// 设置路径终点
context.lineTo(50, 20); 
// 结束设置路径
context.closePath();
// 输出路径轮廓 
context.stroke(); 

// 开始设置路径
context.beginPath(); 
// 设置路径原点
context.moveTo(10, 20);  
// 设置路径终点
context.lineTo(50, 50); 
// 结束设置路径
context.closePath();
// 输出路径轮廓 
context.stroke(); 


/**
 * 画圆
 */

context.beginPath();
// 绘制圆形区域
context.arc(40, 40, 20, 0, Math.PI * 2, false);
context.closePath();
// 使用stroke 绘制轮廓
context.stroke(); 

// 绘制半圆
context.beginPath();
// 绘制半圆形
context.arc(40, 40, 10, 0, Math.PI, false);
context.closePath();
// 使用fill 填充圆形区域
context.fill(); 



